<!--TODO 色系待处理 尽可能所有页面头部都通用-->

<template>
  <div class="root-navbar">
    <div :style="BCType === 'opaque' && `background: ${BColor}`" :class="`${BCType}-pos-bg ${bsd ? 'bsd' : ''}`" class="pos">
      <div v-if="left" class="left-icon">
        <slot name="left">
          <div :style="BCType === 'opaque' && `color: ${color}`" :class="`${BCType}-arrow-color`" @click="pageGoBack()" slot="left">
            <van-icon name="arrow-left"/>
          </div>
        </slot>
      </div>
      <div class="center-content">
          <slot name="center">
            <div :class="`${BCType}-center-color center-title-text-w`"
                 :style="BCType === 'opaque' && `color: ${color}`">
              {{ title || $route.meta.title }}
            </div>
          </slot>
      </div>
      <div v-if="right" class="right-icon" :class="`${BCType}-right-color`">
        <slot name="right">
          <div :style="BCType === 'opaque' && `color: ${color}`"
               :class="`${BCType}-right-color right-popover`">
            <van-icon  @click="onSelect" name="ellipsis"/>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * this.$route.meta.title 支持：动态赋值
   * @description navBar 公用组件
   * @property {String} bsd 是否阴影
   * @property {String} BColor 字体色
   * @property {String} BCType 背景色 default 橘黄色 | primary 白色 | opaque 透明
   * @property {String} color 字体颜色
   * @property {Boolean} left 是否显示回退
   * @property {Boolean} right 是否显示功能块气泡弹框
   * @property {Array} actions = [{text: '接受邀请', icon: 'success', cbName: '回调名称'}] 配置气泡弹框参数
   * @event {Function} pageGoBack 点击回退 重写 | 默认回退
   * @example <root-navbar @pageGoBack="pageGoBack" :actions="actionsPopover" :right="true" @successPopover="successPopover" @crossPopover="crossPopover" BColor="red" color="#FFF"  ></root-navbar>
   */
  export default {
    name: "navbar",
    props: {
      bsd: {
        type: Boolean,
        default: true
      },
      BCType: {
        type: String,
        default: 'default',
      },
      BColor: { //BCType === opaque 启用自定义色系
        type: String,
        default: 'rgba(0,0,0,0)'
      },
      color: { //BCType === opaque 启用自定义色系
        type: String,
        default: '#FFF'
      },
      left: {
        type: Boolean,
        default: true
      },
      right: {
        type: Boolean,
        default: false
      },
      // _title: {
      //   type: String,
      //   default: ''
      // },
    },

    // 安卓设备回退 app root 托管了事件中转派发 __BACK_STATE 数值++ 触发当前page 的 pageGoBack方法
    inject: ['__BACK_STATE'],

    computed: {
      backState() {
        return this.__BACK_STATE();
      }
    },

    watch: {
      backState: function () {
        this.pageGoBack()
      },
      '$route.meta': {
        handler: function () {
          this.watcher(this.$route.meta, 'title', this.callback)
        },
        deep: true,
        immediate: true
      }
    },

    data() {
      return {
        title: '',
        showPopover: false,
      }
    },
    methods: {
      /**
       * @description 气泡回调
       * **/
      onSelect(action, index) {
        if (this.$listeners[action.cbName]) {
          this.$emit(action.cbName, index)
        }
      },
      /**
       * @description 自定义回退行为
       * TODO 当设备回退触发给root-navbar 组件，可能会有缓存组件 or 活动区域上使用了多个此组件 、 pageGoBack也就触发对应的次数,
       *     目前避免触发不是该目标组件，主要问题出现在路由组件内部内嵌弹出层使用时，才会出现误触发， 可想而知 一个路由组件 内嵌多个 弹出层 view 都使用了 该方法 那么问题来了，一个页面同时出现 1个以上
       *     那么最终点击回退，没有处理边界问题
       *     思路：root-navbar 添加开关状态 v-if 当弹出层状态隐藏
       * **/
      pageGoBack() {
        // console.log('pageGoBack: 此组件在可视区中的clientWidth', this.$el.clientWidth)
        // console.log('pageGoBack: 父组件在可视区中的clientWidth', this.$parent.$el.clientWidth)
        if (this.$el.clientWidth === 0 && this.$parent.$el.clientWidth === 0) return;
        if (this.$listeners['pageGoBack']) {
          this.$emit('pageGoBack');
        } else {
          this.$router.goBack(-1)
        }
      },

      /**
       * 重写 this.$router.meta.name title 属性
       * **/
      watcher(obj, nm, callback) {
        this.title = ''
        let val = obj[nm]
        Object.defineProperty(obj, nm, {
          set: function (e) {
            val = e
            callback && callback(e)
          }.bind(this),
          get: function () {
            return val
          }.bind(this),
        })
      },

      /**
       * 设置title 回调
       * **/
      callback(event) {
        // console.log('标题数据变化：', this.$route.meta.title)
        this.title = event
      }
    },

  } 
</script>

<style lang="scss">
  .root-navbar {
    @include wh(100%, 50px);
     .left-icon,
     .right-icon {
       text-align: left;
       font-size: 12px;
      .van-icon {
        text-align: left;
        font-size: 20px;
        height: 50px;
        line-height: 50px;
      }
       .navbar-right {
        display: flex;
        justify-content: flex-end !important;
       }
    }

    .pos {
      @include wh(100%, 50px);
      z-index: 199;
      position: fixed;
      top: 0;
      left: 0;
      padding: 0 11px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
    }

    .left-icon,
    .right-icon {
      flex: 0 0 60px;
      @include wh(60px, 50px);
      line-height: 50px;
    }

    .left-icon {
      .left {
        @include wh(60px, 50px);
        text-align: left;
      }
    }
    .right-popover {
      text-align: right;
    }

    .center-content {
      text-align: center;
      flex: 1;
      @extend %ellipsis;
     .center-title-text-w {
       width: calc(100vw - 142px);
       display: block;
     }
    }

    //default 橘黄色 | primary 白色 | opaque 透明
    .default-pos-bg {
      @include background_color('theme-bg-c');
    }

    .primary-pos-bg {
      @include background_color('themed-box-cart-c');
    }

    .opaque-pos-bg {
      background: transparent;
      box-shadow: none;
    }

    //primary 白色 背景 黑色字体
    .primary-arrow-color {
      @include font_color('title-fc')
    }
    
    .primary-center-color {
      @include font('fz16', 'title-fc', 50px, 500);
    }

    .primary-right-color {
      @include font_color('title-fc')
    }

    // 橘黄背景 白色字体
    .default-arrow-color {
      @include font_color('wihte')
    }
    .default-center-color {
      @include font('fz16', 'wihte', 50px, 500);
    }
    .default-right-color {
      @include font_color('wihte')
    }


    // opaque 透明背景 默认颜色
    .opaque-arrow-color {
      color: #FFF;
    }

    .opaque-center-color {
      @include font_size('fz16');
      color: #FFF;
    }
    .opaque-right-color {
      color: #FFF;
    }
  }
</style>
